<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件-基本介绍(Keyboard Events - Basic Introduction)</title>
  <!-- 
  在JavaScript中，键盘事件（Keyboard Events）用于处理用户在键盘上按下或释放键的操作。这些事件允许开发者对用户输入进行响应，以实现交互式功能。
  一、键盘事件的类型
  1. keydown 事件：
    - 当用户按下某个键时触发。该事件在按键被按下的瞬间触发，且可以捕获所有按键（包括功能键、字母键、数字键等）。
  2. keyup 事件：
    - 当用户释放某个键时触发。该事件在按键被释放的瞬间触发。
  3. keypress 事件（已废弃）：
    - 在某些浏览器中，当用户按下并保持某个字符键时触发。该事件主要用于字符输入，但由于其不一致性和局限性，已被 keydown 和 keyup 事件所取代。

  二、事件对象
  在处理键盘事件时，事件处理函数会接收到一个事件对象（Event Object），该对象包含有关事件的信息。常用的属性包括：
  - key：表示按下或释放的键的值（例如 'a'、'Enter'、'Escape' 等）。
  - code：表示物理按键的代码（例如 'KeyA'、'Enter' 等），与键盘布局无关。
  - altKey、ctrlKey、shiftKey：布尔值，表示在按下该键时是否同时按下了这些修饰键。

  三、基本用法
  document.addEventListener('keydown', function(event) {
    console.log('按下的键:', event.key); // 输出按下的键
    if (event.key === 'Enter') {
      console.log('用户按下了回车键');
    }
  });

  document.addEventListener('keyup', function(event) {
    console.log('释放的键:', event.key); // 输出释放的键
  });

  四、应用场景
  1. 表单验证：在用户输入时实时验证输入内容，例如检查电子邮件格式或密码强度。
  2. 快捷键：实现自定义的快捷键功能，例如按下特定组合键执行某个操作。
  3. 游戏控制：在游戏中使用键盘事件来控制角色的移动或执行特定动作。
  4. 文本编辑：在文本编辑器中处理键盘输入，以实现撤销、重做等功能。

  五、注意事项
  - 事件监听：可以在整个文档上或特定元素上添加键盘事件监听器。
  - 防止默认行为：在某些情况下，可能需要使用 event.preventDefault() 方法来防止浏览器的默认行为（如表单提交）。
  - 跨浏览器兼容性：确保在不同浏览器中测试键盘事件的行为，尤其是对一些特殊键的处理。

  六、总结
  键盘事件是 JavaScript 中处理用户输入的重要组成部分，允许开发者对键盘操作做出响应。通过 keydown 和 keyup 事件，开发者可以实现各种交互功能，如表单验证、快捷键、游戏控制等。理解键盘事件的基本用法和应用场景，有助于提升网页的用户体验。
   -->
</head>
<body>

  <h3>1. 基本使用</h3>
  <input type="text" id="input" placeholder="按下键盘查看输出">

  <h3>2. 应用场景</h3>
  <input type="text" id="input2" placeholder="按下键盘查看输出">
  <button class="seach">搜索</button>

  <script>
    // 1. 基本使用
    const input = document.getElementById('input');
    input.addEventListener('keydown', function (event) {
      console.log('keydown-按下的键:', event.key, event.keyCode, event.code);
      if (event.key === 'Enter') {
        console.log('用户按下了回车键');
      }
    });
    input.addEventListener('keyup', function (event) {
      console.log('keyup-释放的键:', event.key, event.keyCode, event.code);
    });

    // 2. 应用场景
    const input2 = document.getElementById('input2');
    const seach = document.querySelector('.seach');
    input2.addEventListener('keydown', function (event) {
      if (event.key === 'Enter') {
        seach.click();
      }
    })

    // 3. 自动获取焦点
    document.addEventListener('DOMContentLoaded', function () {
      input2.focus();
    })
  </script>
  
</body>
</html>